<template>
  <div>
    <v-nav :current="1" @changelang="changelang"></v-nav>
    <banner :banners="banners" v-if="isBannerShow"></banner>
    <brief :title="homeLangList[0]" :flag="1"></brief>
    <div class="product">
      <div class="product-img">
        <img src="@/assets/home/2.png" alt="">
        <img src="@/assets/home/3.png" alt="">
      </div>
      <div>
        <h1>{{homeLangList[1]}}</h1>
        <div>
          <p>{{lists.nine}}<span @click="toMore">{{homeLangList[6]}} ></span></p>
        </div>
      </div>
    </div>
    <div class="product">
      <div class="product-img">
        <img src="@/assets/home/4.png" alt="">
        <img src="@/assets/home/5.png" alt="">
      </div>
      <div>
        <h1>{{homeLangList[2]}}</h1>
        <div>
          <p>{{lists.four}}<span @click="toMore">{{homeLangList[6]}} ></span></p>
        </div>
      </div>
    </div>
    <div style="background-color: #2154b9;margin-bottom: 16px">
      <brief :title="homeLangList[3]" :flag="2"></brief>
      <div>
        <div class="sec2-items">
          <div v-for="(list, index) in aboutLists" :key="list.value">
            <h2>{{list.name}}</h2>
            <div>
              <span :class="{noMar: list.value === '28'}">{{list.value}}</span>
              <!-- <span v-if="list.value === '28'">{{homeLangList[10]}}</span> -->
              <div>
                <span>+</span>
                <span v-if="index === 0">{{homeLangList[7]}}</span>
                <span v-if="index === 1">{{homeLangList[8]}}</span>
                <span v-if="index === 2">{{homeLangList[9]}}</span>
                <span v-if="index === 3">{{homeLangList[11]}}</span>
              </div>
            </div>
            <hr>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-bottom: 16px;background-color: #fff">
      <brief :title="homeLangList[4]" :flag="3"></brief>
      <div style="width: 100%;height: 1px;background-color: #ededed"></div>
      <div class="licheng">
        <div v-for="(growList, index) in growLists" :key="growList.id">
          <span>{{index + 1}}</span>
          <img :src="growList.image" alt="">
          <div>
            <h1>{{growList.title}}{{homeLangList[7]}}</h1>
            <p>{{growList.content}}</p>
          </div>
        </div>
      </div>
    </div>
    <div v-if="isNews">
      <brief :title="homeLangList[5]" :flag="4"></brief>
      <router-link :to="{name: 'newsDetails', params:{id: newsList.id}}" tag="div" class="zxlist" v-for="newsList in newsLists" :key="newsList.id">
        <div>
          <h1>{{newsList.time}}</h1>
          <span>{{newsList.year}}</span>
        </div>
        <div>
          <h2>{{newsList.post_title}}</h2>
          <p>{{newsList.post_excerpt}}</p>
        </div>
      </router-link>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
import vNav from '@/components/nav/nav'
import banner from '@/components/banner'
import brief from '@/components/brief'
import vFooter from '@/components/footer'
import {mapGetters} from 'vuex'
import { getHomeData } from '@/services/api.js'
import { getHomeDataEn } from '@/services/api_en.js'
export default {
  name: 'home',
  data () {
    return {
      growLists: [],
      aboutLists: [],
      newsLists: [],
      banners: [],
      isBannerShow: false,
      isNews: true
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'homeLangList': 'homeLangList'
    })
  },
  components: {
    vNav,
    banner,
    brief,
    vFooter
  },
  methods: {
    toMore () {
      this.$router.push({name: 'chanye'})
    },
    _getChList () {
      getHomeData().then((res) => {
        this.lists = res
        let growListsAll = res.grow
        this.growLists = growListsAll.slice(0, 4)
        this.aboutLists = res.about
        this.newsLists = res.news
        this.banners = res.banner
        this.isBannerShow = true
        for (let k in res.news) {
          this.newsLists[k].post_title = this.newsLists[k].post_title.substring(0, 12) + '...'
        }
        this.lists.four = res.four.substring(0, 59) + '...'
        this.lists.nine = res.nine.substring(0, 60) + '...'
        this.timeDatao = res.grow[0]
        this.timeDatat = res.grow[1]
      })
    },
    _getEnList () {
      getHomeDataEn().then((res) => {
        this.lists = res
        let growListsAll = res.grow
        this.growLists = growListsAll.slice(0, 4)
        this.aboutLists = res.about
        this.newsLists = res.news
        this.banners = res.banner
        this.isBannerShow = true
        for (let k in res.news) {
          this.newsLists.post_title = res.news[k].post_title.substring(0, 12) + '...'
        }
        this.lists.four = res.four.substring(0, 59) + '...'
        this.lists.nine = res.nine.substring(0, 60) + '...'
        this.timeDatao = res.grow[0]
        this.timeDatat = res.grow[1]
      })
    },
    version () {
      if (this.lang === 1) {
        this.isNews = true
        this._getChList()
      }
      if (this.lang === 2) {
        this.isNews = false
        this._getEnList()
      }
    },
    changelang (res) {
      if (res === 1) {
        this.isNews = true
        this._getChList()
      }
      if (res === 2) {
        this.isNews = false
        this._getEnList()
      }
    }
  },
  created () {
    this.version()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
$font-size-base:75;  //标注稿基准字体大小
$font-color-base:#333;  //基础字体颜色
// $bgColor:#f4f4f4;  //背景色
/*-------------font-size start-------------*/
@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}

html,body,a{
  font-family: 'microsoft yahei','Helvetica','Verdana',sans-serif;
  @include font-dpr(12px);
  color: $font-color-base;
}
.noMar {
  margin-right: 0!important
}
.product {
  box-shadow: 0px 12px 29px 0px rgba(32, 112, 214, 0.35);
  width: 690rem/$font-size-base;
  margin: 0 auto;
  margin-bottom: 15rem/$font-size-base;
  background-color: #fff;
  .product-img {
    overflow: hidden;
    img {
      width: 345rem/$font-size-base;
      height: 289rem/$font-size-base;
      float: left;
    }
  }
  h1 {
    margin-top: 36rem/$font-size-base;
    margin-bottom: 50rem/$font-size-base;
    font-size: 30rem/$font-size-base;
    letter-spacing: 3rem/$font-size-base;
    color: #2053b9;
    position: relative;
    padding-left: 30rem/$font-size-base;
    font-weight: bolder;
    clear: both;
  }
  h1:after {
    content: "";
    position: absolute;
    top: 50rem/$font-size-base;
    left: 30rem/$font-size-base;
    width: 100rem/$font-size-base;
    height: 2rem/$font-size-base;
    background-color: #2053b9;
  }
  p {
    font-size: 26rem/$font-size-base;
    line-height: 38rem/$font-size-base;
    letter-spacing: 1rem/$font-size-base;
    color: #949494;
    padding: 30rem/$font-size-base;
    padding-top: 0;
    padding-bottom: 50rem/$font-size-base;
    span {
      color: #2053b9;
      font-size: 26rem/$font-size-base;
      float: right;
    }
  }
}
.sec2-items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 690rem/$font-size-base;
  margin: 0 auto;
  flex-wrap: wrap;
  padding-top: 73rem/$font-size-base;
  >div {
    width: 300rem/$font-size-base;
    height: 300rem/$font-size-base;
    background-color: #1951bf;
    border: solid 1rem/$font-size-base rgba(255, 255, 255, 0.22);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 73rem/$font-size-base;
    h2 {
      font-size: 24rem/$font-size-base;
      letter-spacing: 2rem/$font-size-base;
      color: #ffffff;
      text-align: center
    }
    hr {
      border: 0;
      width: 38rem/$font-size-base;
      height: 1rem/$font-size-base;
      background-color: #fff;
    }
    >div {
      margin: 33rem/$font-size-base 0;
      display: flex;
      justify-content: center;
      align-items: center;
      >span {
        margin-right: 27rem/$font-size-base;
        font-size: 58rem/$font-size-base;
        // line-height: 26rem/$font-size-base;
        letter-spacing: 5rem/$font-size-base;
        color: #ffffff;
      }
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        span {
          font-size: 24rem/$font-size-base;
          line-height: 26rem/$font-size-base;
          letter-spacing: 1rem/$font-size-base;
          color: #ffffff;
        }
      }
    }
  }
  >div:nth-child(2) {
    background-color: transparent;
  }
  >div:nth-child(3) {
    background: url("../assets/home/s2-3.png") no-repeat center;
    background-size: cover;
  }
  >div:nth-child(4) {
    background-color: transparent;
  }
}
.licheng {
  background-color: #fff;
  >div {
    display: flex;
    align-items: center;
    width: 690rem/$font-size-base;
    margin: 0 auto;
    margin-top: 73rem/$font-size-base;
    span {
      display: block;
      width: 42rem/$font-size-base;
      height: 42rem/$font-size-base;
      text-align: center;
      line-height: 42rem/$font-size-base;
      background-color: #ffffff;
      border: solid 2rem/$font-size-base #2154b9;
      border-radius: 50%;
      position: relative
    }
    span:after {
      content: "";
      width: 65rem/$font-size-base;
      height: 2rem/$font-size-base;
      background-color: #2154b9;
      position: absolute;
      top: 50%;
      left: 43rem/$font-size-base;
      transform: translateY(-50%)
    }
    img {
      width: 103rem/$font-size-base;
      height: 103rem/$font-size-base;
      margin-left: 50rem/$font-size-base;
      margin-right: 20rem/$font-size-base;
      z-index: 1
    }
    h1 {
      font-size: 30rem/$font-size-base;
      line-height: 15rem/$font-size-base;
      letter-spacing: 3rem/$font-size-base;
      color: #0057bd;
      margin-bottom: 19rem/$font-size-base
    }
    p {
      font-size: 26rem/$font-size-base;
      color: #000000;
    }
  }
}
.zxlist {
  display: flex;
  width: 690rem/$font-size-base;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
  padding: 42rem/$font-size-base 0;
  border-top: 1px solid #ededed;
  >div {
    h1 {
      font-size: 36rem/$font-size-base;
      color: #0070dd;
      margin-bottom: 25rem/$font-size-base
    }
    span{
      font-size: 22rem/$font-size-base;
      color: #666666;
    }
    h2 {
      font-size: 28rem/$font-size-base;
      color: #333333;
      margin-bottom: 27rem/$font-size-base;
      font-weight: bolder;
    }
    p {
      font-size: 26rem/$font-size-base;
      color: #666;
    }
  }
  >div:nth-child(1) {
    width: 109rem/$font-size-base;
    display: flex;
    flex-direction: column;
    align-items: center
  }
  >div:nth-child(2) {
    width: 491rem/$font-size-base
  }
}
</style>
